<template>
	<view class="address">
		<view class='zz dFlex jCenter_aCenter' v-if="store.id && count == '0'">
			<view class="addContent">
				<view class="tits dFlex jStart_aCenter">
					<view class="titIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/toastIcon.png" mode="widthFix"></image>
					</view>
					<text>温馨提示</text>
				</view>
				<view class="toastDesc">
					已推荐最佳自提点，因距离等问题可自行切换
				</view>
				<view class="store">
					<view class="storeTit">{{store.store_name}}</view>
					<view class="storeDetail dFlex jStart_aStart">
						<view class="storeImg imgPublic">
							<image :src="store.store_imgs" mode="widthFix"></image>
						</view>
						<view class="storeInfo">
							<view class="store_add">{{(store.address?store.address:'') + (store.address_detail?store.address_detail:'')}}</view>
							<view class="tag" v-if="store.is_lc && !store.is_ld">冷藏</view>
							<view class="tag" v-if="store.is_ld && !store.is_lc">冷动</view>
							<view class="tag" v-if="store.is_ld && store.is_lc">冷动冷藏</view>
							<view class="distance">距离：<text>{{store.distance_km}}</text></view>
						</view>
					</view>
				</view>
				<view class="exchange" @tap.stop='changeAdd'>切换其他自提点</view>
				<view class="btns dFlex jAround_aCenter">
					<view class="btn" @tap.stop='closeLogin'>不用了</view>
					<view class="btn btn1" @tap.stop='selAdd'>选这个</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			store:{
				type:Object,
				default:{},
			},
			count:{
				type:Number,
				default:0,
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			closeLogin() {
				this.$emit('opFlag', 1);
			},
			selAdd(){
				this.$emit('selLine','');
			},
			changeAdd(){
				this.$emit('changeAdd','');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.address{
		width: 100%;
		height: 100%;
		.addContent{
			width: 86.66%;
			background: white;
			padding: 38rpx 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			color:#333333;
			.btns{
				width: 100%;
				.btn{
					width: 40%;
					text-align: center;
					color: #999999;
					border-radius: 50px;
					padding: 16rpx 0;
					font-size: 14px;
					background: #DFDFDF;
				}
				.btn1{
					background: linear-gradient(180deg, #FC9700 0%, #FB5D02 100%);
					color: white;
				}
			}
			.exchange{
				width: 100%;
				margin-bottom: 40rpx;
				color: #999999;
				font-size: 14px;
				text-align: center;
			}
			.store{
				width: 100%;
				padding: 16rpx 8rpx 8rpx;
				background: rgb(254, 202, 7);
				border-radius: 30rpx;
				box-sizing: border-box;
				margin:24rpx 0;
				.storeDetail{
					width: 100%;
					background: white;
					padding: 16rpx 12rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					.storeInfo{
						flex: 1;
						.store_add{
							font-size: 12px;
							color:#666666;
						}
						.tag{
							width: max-content;
							font-size: 12px;
							color: #4095E5;
							border:1px solid #4095E5;
							padding: 2px;
							border-radius: 4px;
							margin: 8rpx 0 0;
						}
						.distance{
							margin-top: 8rpx;
							font-size: 13px;
							font-weight: bold;
						}
					}
					.storeImg{
						width: 148rpx;
						height: 148rpx;
						margin-right: 18rpx;
						image{
							width: 100%;
						}
					}
				}
				.storeTit{
					width: 100%;
					margin-bottom: 16rpx;
					color: #4E0202;
					font-size: 15px;
					padding: 0 22rpx;
					box-sizing: border-box;
				}
			}
			.toastDesc{
				width: 100%;
				font-size: 14px;
			}
			.tits{
				margin-bottom: 12rpx;
				.titIcon{
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
					image{
						width:100%;
						height: 100%;
					}
				}
				font-size: 18px;
				font-weight: bold;
			}
		}
	}
</style>